<template>
  <div class="app-container" >
    <div style="overflow: hidden;">
      <a href="javascript:void(0)" @click="left1">
        <div ref="l_left" style="width: 50%;text-align: center;float: left;padding: 3px 0;color: #158FFF;border-bottom: 3px solid #158FFF">
          药品销售类列表
        </div>
      </a>
      <a href="javascript:void(0)" @click="right1">
        <div ref="r_right" style="width: 50%;text-align: center;float: left;padding: 3px 0;border-bottom: 3px solid #DFE4ED">
          药品销售统计列表
        </div>
      </a>
    </div>

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="药品名称" prop="drugName">
        <el-input
          v-model="queryParams.drugName"
          placeholder="请输入药品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="选择时间">
      <el-date-picker
        v-model=" dateRange"
        size="small"
        style="width: 240px"
        value-format="yyyy-MM-dd"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div ref="_left" style="display: block">
      <el-table :data="postList"
                :summary-method="getSummaries"
                show-summary>
        <el-table-column prop="drugId" label="药品ID" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="drugName" label="药品名称" width="200px"></el-table-column>
        <el-table-column prop="drugPrice" label="药品价格" :show-overflow-tooltip="true" width="200px"></el-table-column>
        <el-table-column prop="drugNum" label="交易数量" :show-overflow-tooltip="true" width="200px"></el-table-column>
        <el-table-column prop="totalPrice" label="交易总价" ></el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div ref="_right" style="display: none">
    <el-table :data="postList2"
              :summary-method="getSummaries"
              show-summary>
      <el-table-column prop="drugId" label="药品ID" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="drugName" label="药品名称" ></el-table-column>
      <el-table-column prop="totalPrice" label="交易总价" ></el-table-column>
      <el-table-column prop="drugNum" label="交易数量" :show-overflow-tooltip="true" ></el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    </div>
  </div>
</template>



<script>
    import { listPost, listPost2,getPost, delPost, addPost, updatePost, exportPost } from "@/api/datamanage/drug";

    export default {
        name: "drug",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 岗位表格数据
                postList: [],
                postList2: [],
                // 日期范围
                dateRange: [],
                // 是否显示弹出层
                open: false,
                // 状态数据字典
                statusOptions: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    drugId: undefined,
                    drugName: undefined,
                    drugPrice: undefined,
                    drugNum:undefined,
                    totalPrice:undefined,
                    createTime:undefined
                },
                // 表单参数
                form: {},
            };
        },
        created() {
            this.getList();
            this.getList2();
            this.getDicts("sys_normal_disable").then(response => {
                this.statusOptions = response.data;
            });
        },
        methods: {
            left1() {
                this.flag = "0";
                this.queryParams.pageNum = 1;
                this.getList();
                this.$refs['_left'].style.display="block";
                this.$refs['_right'].style.display="none";
                this.$refs['l_left'].style.color="#158FFF";
                this.$refs['r_right'].style.color="#000";
                this.$refs['l_left'].style.borderBottom="3px solid #158FFF";
                this.$refs['r_right'].style.borderBottom="3px solid #DFE4ED";
            },
            right1() {
                this.flag = "1";
                this.queryParams.pageNum = 1;
                this.getList2();
                this.$refs['_right'].style.display="block";
                this.$refs['_left'].style.display="none";
                this.$refs['r_right'].style.color="#158FFF";
                this.$refs['l_left'].style.color="#000";
                this.$refs['r_right'].style.borderBottom="3px solid #158FFF";
                this.$refs['l_left'].style.borderBottom="3px solid #DFE4ED";
            },
            /** 查询药品销售列表 */
            getList() {
                this.loading = true;
                listPost(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                    this.postList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            getList2() {
                this.loading = true;
                listPost2(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                    this.postList2 = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 岗位状态字典翻译
            statusFormat(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
                this.getList2();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总价';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        if(index==3) {
                            sums[index] += ' ';
                        }else {
                            sums[index] += ' ';
                        }
                    } else {
                        sums[index] = '';
                    }
                });

                return sums;
            }

        }
    };
</script>
